<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--SEO优化项 -->
    <title>06</title>
    <meta name="description" content="这里输入网站简介" />
    <meta name="Keywords" content="这里输入网站关键词" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入本页面css 文件 -->
    <link rel="stylesheet" href="css/06.css">
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <!-- 轮播样式 -->
    <!-- <link rel="stylesheet" href="css/public.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
    <!-- 轮播效果实现 -->
    <!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
    <!-- <script type="text/javascript" src="js/zturn.js"></script> -->
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
        window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
    </script>
    <script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>
</head>

<body>
    <div class="w1920 bg">


        <!-- 顶部快捷导航 -->
        <div class="nav">
            <!-- logo -->
            <div class="logo fl">
                <img src="img/duocaiyoueryuan_logo.png" width="80px" height="81px" alt="logo">
            </div>
            <!-- 导航按钮 -->
            <div class="nav-box fl">
                <!-- 首页——导航图标模块 -->
                <a href="index.html">
                    <div class="nav-bar" style="width: 47px;height: 69px;">

                        <ul class="nav-box-color">
                            <li class="nav-box-color-icon">
                                <img src="img/index@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                            <li class="nav-box-color-text">首页</li>
                        </ul>
                        <!-- <ul class="nav-box-Selected" style="left: 16px;"></ul> -->

                    </div>
                </a>

                <!-- 班级动态——导航图标模块 -->
                <a href="bjdt.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left:48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-color-icon">
                                <img src="img/班级 拷贝 2@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">班级动态</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>


                <!-- 宝宝课表——导航图标模块 -->
                <a href="bbkc.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 47px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/课表@2x 拷贝 2@2x.png" width="22px" height="22px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝课表</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 宝宝请假——导航图标模块 -->
                <a href="09-02.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li href="09-02.html" class="nav-box-icon" style="top: 12px;left: 11px;">
                                <img src="img/学生请假 拷贝 2@2x.png" width="25px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝请假</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 幼儿园介绍——导航图标模块 -->
                <a href="08-05.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-five">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/幼儿园 拷贝 2@2x.png" width="22px" height="25px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-five">幼儿园介绍</li>
                        <!-- <ul class="nav-box-Selected" style="left: 27px;"></ul> -->
                    </div>
                </a>

                <!-- 出勤详情——导航图标模块 -->
                <a href="07-02.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 12px;left: 13px;">
                                <img src="img/出勤 拷贝 2@2x.png" width="22px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">出勤详情</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 发展评价——导航图标模块 -->
                <a href="10.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li href="10.html" class="nav-box-color-icon">
                                <img src="img/评价 (1) 拷贝 2@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">发展评价</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 发展评价——导航图标模块 -->
                <a href="05.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 11px;">
                                <img src="img/相册 拷贝 2@2x.png" width="25px" height="25px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝相册</li>
                        <ul class="nav-box-Selected" style="left: 22px;"></ul>
                    </div>
                </a>

                <!-- 宝宝课表——导航图标模块 -->
                <a href="01.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/设置 拷贝 2@2x.png" width="22px" height="22px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">班牌设置</li>
                        <!-- <ul class="nav-box-Selected" style="left:22px;"></ul> -->
                    </div>
                </a>

            </div>
            <!-- 日期天气时间 -->
            <div class="weatherDate-Box fr">
                <ul class="temperature fr">21-32°C</ul>
                <ul class="weather fr">
                    <img src="img/天气@2x.png" width="54px" height="53px" alt="weather">
                </ul>
                <ul class="time fr">14 : 43</ul>
                <ul class="dateBox fl">
                    <li class="date">2020-11-16</li>
                    <li class="week">星期一</li>
                </ul>
            </div>
            <!-- 顶部快捷导航start -->
        </div>

        <!-- 相册框 -->
        <div class="xiangce">
            <ul class="xiangce-text fl">李云云的相册</ul>
        </div>
        <!-- 中心版面 -->
        <div class="centerBox fl">
            <!-- 轮播模块 -->

            <div class="container">

                <div id="carousel">
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-1" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-2" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-3" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-4" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-5" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-6" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-7" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-8" />
                    <img src="img/图层 585@2x.png" width="551px" height="630px" id="item-9" />
                </div>
                <!-- <br> -->
                <!-- <a href="#" id="next" class="btn btn-primary">下一幅</a> -->
                <!-- <a href="#" id="prev" class="btn btn-primary">前一幅</a> -->
                <a href="#" id="next" class="leftPage">
                    <li class="leftPage-img fl">
                        <img src="img/tianchongxing-@2x.png" width="56px" height="49px" alt="">
                    </li>
                </a>
                <a href="#" id="prev" class="rightPage">
                    <li class="rightPage-img fl">
                        <img src="img/tianchongxing- 拷贝@2x.png" width="56px" height="49px" alt="">
                    </li>
                </a>



            </div>

            <div class="animal">
                <a href="javascript:;" class="" title="animal" target="">
                    <img src="img/千库网_手绘卡通可爱小动物图标_元素编号10417886 拷贝 6@2x.png" width="769px" height="104px" alt="">
                </a>
            </div>



            <div class="yiqiwan">
                <!-- <a href="javascript:;" class="" title="yiqiwan" target=""> -->
                <img src="img/千库网_小孩子卡通儿童一起玩_元素编号11860035@2x.png" width="228px" height="226px" alt="">
                <!-- </a> -->
            </div>

            <div class="fanhui">
                <a href="05.html" class="" title="fanhui" target="">
                    <img src="img/组 27 拷贝@2x.png" width="91px" height="77px" alt="">
                </a>
            </div>

            <div class="lujing">
                <ul class="lujing-text">宝宝相册 > 相册详情</ul>
            </div>




        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            var carousel = $("#carousel").waterwheelCarousel({
                flankingItems: 3,
                movingToCenter: function($item) {
                    $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
                },
                movedToCenter: function($item) {
                    $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
                },
                movingFromCenter: function($item) {
                    $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
                },
                movedFromCenter: function($item) {
                    $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
                },
                clickedCenter: function($item) {
                    $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
                }
            });

            $('#prev').bind('click', function() {
                carousel.prev();
                return false
            });

            $('#next').bind('click', function() {
                carousel.next();
                return false;
            });

            $('#reload').bind('click', function() {
                newOptions = eval("(" + $('#newoptions').val() + ")");
                carousel.reload(newOptions);
                return false;
            });

        });
    </script>


</body>

</html>